<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <nav class="nav"> <a class="nav__logo" href="#"><img src="https://via.placeholder.com/120x34?text=''"></a> <button id="burger" class="nav__burger-button"> <div class="nav__burger"> <div class="nav__burger-inner"></div> </div> </button> <ul class="nav__link-wrapper"> <li class="nav__link"><a href="#">About</a></li> <li class="nav__link"><a href="#">Team</a></li> <li class="nav__link"><a href="#">Work</a></li> <li class="nav__link"><a href="#">Contact</a></li> </ul> </nav>

a { text-decoration: none; color: inherit; } .nav { display: flex; height: 80px; justify-content: space-between; align-items: center; padding: 0 20px; } .nav__logo { height: 34px; width: auto; } .nav__link-wrapper { display: none; flex-wrap: wrap; justify-content: flex-end; padding-left: 0; } .nav__link { list-style: none; padding: 10px; } .nav__burger-button { padding: 10px; cursor: pointer; background-color: transparent; border: none; outline: none; } .nav__burger { position: relative; width: 40px; height: 24px; } .nav__burger-inner { display: block; position: absolute; top: 0; width: 40px; height: 4px; border-radius: 4px; background-color: #666; transform: translate(0, 0); transition: all 0.3s; } .nav__burger-inner:before, .nav__burger-inner:after { content: ""; display: block; position: absolute; width: 40px; height: 4px; border-radius: 4px; background-color: #666; transform: translate(0, 0); transition: all 0.3s; } .nav__burger-inner:before { top: 10px; opacity: 1; } .nav__burger-inner:after { top: 20px; } .nav__burger-inner.active, .nav__burger-inner.active:before, .nav__burger-inner.active:after { background-color: white; } .nav__burger-inner.active { transform: translate(0, 10px) rotate(45deg); } .nav__burger-inner.active:before { opacity: 0; transform: translate(-6px, -2px) rotate(-45deg); } .nav__burger-inner.active:after { transform: translate(0, -20px) rotate(-90deg); } @media (min-width: 0) and (max-width: 768px) { .nav__link-wrapper { width: 100%; } .nav__link-wrapper.expanded { display: flex; position: fixed; top: 150px; left: 0; flex-direction: column; justify-content: space-between; z-index: -1; flex-direction: column; font-size: 40px; color: white; } .nav__link-wrapper.expanded:before { content: ""; position: fixed; top: 0; right: 0; bottom: 0; left: 0; background-color: #666; z-index: -1; animation: fadeIn 0.3s 1; } .nav__link-wrapper.expanded li { opacity: 0; align-self: center; } .nav__link-wrapper.expanded li:nth-child(1) { animation: slideFadeIn 0.15s 1; animation-delay: 0.05s; animation-fill-mode: forwards; animation-timing-function: ease-out; } .nav__link-wrapper.expanded li:nth-child(2) { animation: slideFadeIn 0.15s 1; animation-delay: 0.1s; animation-fill-mode: forwards; animation-timing-function: ease-out; } .nav__link-wrapper.expanded li:nth-child(3) { animation: slideFadeIn 0.15s 1; animation-delay: 0.15s; animation-fill-mode: forwards; animation-timing-function: ease-out; } .nav__link-wrapper.expanded li:nth-child(4) { animation: slideFadeIn 0.15s 1; animation-delay: 0.2s; animation-fill-mode: forwards; animation-timing-function: ease-out; } } @media (min-width: 768px) { .nav__link-wrapper { display: flex; } .nav__link-wrapper.expanded:before { content: normal; } .nav__link-wrapper li { opacity: 0; } .nav__link-wrapper li:nth-child(1) { animation: slideFadeInAlt 0.15s 1; animation-delay: 0.1s; animation-fill-mode: forwards; animation-timing-function: ease-out; } .nav__link-wrapper li:nth-child(2) { animation: slideFadeInAlt 0.15s 1; animation-delay: 0.05s; animation-fill-mode: forwards; animation-timing-function: ease-out; } .nav__link-wrapper li:nth-child(3) { animation: slideFadeInAlt 0.15s 1; animation-delay: 0s; animation-fill-mode: forwards; animation-timing-function: ease-out; } .nav__link-wrapper li:nth-child(4) { animation: slideFadeInAlt 0.15s 1; animation-delay: -0.05s; animation-fill-mode: forwards; animation-timing-function: ease-out; } .nav__burger-button { display: none; } } @keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } @keyframes slideFadeIn { 0% { opacity: 0; transform: translate(-100px, 0); } 100% { opacity: 1; transform: translate(0, 0); } } @keyframes slideFadeInAlt { 0% { opacity: 0; transform: translate(50px, 0); } 100% { opacity: 1; transform: translate(0, 0); } }

var $button = $('#burger'); var $navLinkWrapper = $('.nav__link-wrapper'); $button.on('click', function(e) { e.preventDefault(); $button.find('.nav__burger-inner').toggleClass('active'); $navLinkWrapper.toggleClass('expanded'); })